<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>自定义实现水波纹 指令 </title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    .btn {
      width: 180px;
      height: 180px;
      line-height: 46px;
      background: yellow;
      border-radius: 10px;
      text-align: center;
      color: #fff;
      font-size: 28px;
      cursor: pointer;

    }
  </style>
</head>

<body>
  <div id="app">
    <h2>{{title}}</h2>
    <div class="btn" v-shuibowen>
      点击登录
    </div>
  </div>

  <script>
    Vue.directive("shuibowen", {
      inserted(el, binding) {
        el.style.overflow = "hidden"
        el.style.position = "relative"

        el.addEventListener("click", function (e) {
          var e = e || window.event
          var x = e.clientX - el.offsetLeft;
          var y = e.clientY - el.offsetTop;
          var left = el.offsetLeft
          var top = el.offsetTop
          // console.log(x,y)
          // console.log(left,top)
          var span = document.createElement("span")
          span.style.pointerEvents = 'none'
          span.style.position = "absolute"
          span.style.left = x + "px"
          span.style.top = y + "px"
          span.style.borderRadius = "50%"
          span.style.background = "rgba(0,0,0,.5)"
          el.append(span)

          var width = 0;
          var height = 0;
          var opacity = 1;
          var timer = setInterval(() => {
            width += 10
            height += 10
            opacity -= 0.02


            span.style.left = x - span.clientWidth / 2 + 'px'
            span.style.top = y - span.clientHeight / 2 + 'px'

            span.style.width = width + "px"
            span.style.height = height + "px"
            span.style.opacity = opacity

            if (span.style.opacity <= 0) {
              span.remove()
              clearInterval(timer)
            }

          }, 10)
        })
      }
    })
    const vm = new Vue({
      el: "#app",
      data: {
        title: "自定义实现水波纹 指令"
      }
    })
  </script>
</body>

</html>